<template>
  <div class="dashboard-container">
    <div style="margin-top:30px;">
      <el-table :data="list" style="width: 100%" border>
          <el-table-column  v-for="col in titleList" :prop="col.ColName" :label="col.DisplayLabel" :key="col.ColName"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import FixiOSBug from "./FixiOSBug";
export default {
  name: "Dashboard",
  mixins: [FixiOSBug],
  data() {
    return {
      list: [],
      titleList: [],
    };
  },
  computed: {
    ...mapGetters(["name"])
  },
  mounted() {
    // console.log("tableList:", this.tableList);
    this.initData(this.tableList.data)
  },
  methods: {
    initData (data) {
      // console.log('data', data)
      console.log('data.title', data.title)
      
      this.titleList = data.title

      // debugger
      // for(let tit of data.title){
      //   // debugger
      //   // tit.ColName = tit.ColName +'-'+tit.DisplayLabel
      //   let titObj = {}
      //   var key = tit.ColName +'-'+tit.DisplayLabel
      //   titObj.ColName = key
      //   titObj.DisplayLabel = key
      //   this.titleList.push(titObj)
      //   // debugger
      // }

      var arr = []
      for (var item of data.list) {
        var obj = {}
        // var titObj = {}
        // var titleArr = {}
        for (var colName in item) {
          debugger
          for (var title of data.title) {
            debugger
            if (title.ColName === colName) {
              debugger
              var key = colName
              // var key = colName +'-'+title.DisplayLabel
              var value = item[colName]
              obj[key] = value

              // if(!titObj[colName]){
              //   titObj[key] = title.DisplayLabel
              // }
              break
            }
          }
        }
        // this.titleList.push(titObj)
        arr.push(obj)
      }
      this.list = arr
      // console.log('titleArr', titleArr)
      console.log('list', this.list)
      console.log('titleList', this.titleList)
    }
  }
};
</script>
